<!DOCTYPE html>
<html>
<head>
	<% include link %>
	<link rel="stylesheet" type="text/css" href="/css/user.css">
</head>
<body>
	<% include head %>
	<div class="myself-top-head">
		<img src="/images/myselfTitle.png" class="myself-top-img">
	</div>
	<div class="container">
		<div class="row ">
			<% include usermodle %>
			<div class="col-md-8  body-right">
				<span class="body-right-titlesp"></span>
	  			<p class="body-right-title">&nbsp;&nbsp;我的私信</p>
		  		<div class="message-left col-xs-3">
		  			<div class="message-left-top">
		  				近期会话
		  			</div>
		  			<% if(upUser == '' || upUser == null) {%>
			  			
		  			<%} else {%>
			  			<div>
			  				<a href="/user/message/<%-upUser._id%>">
					  			<div class="message-left-body">
					  				<div class="message-left-in"></div>
					  				<img src='<%-upUser.headImgUrl%>' class="img-circle">
					  				<%- upUser.name%>
					  			</div>
				  			</a>
			  			</div>
		  			<%}%>
		  			<% for(var i=0;i<ups.length;i++) {%>
		  				<% if(ups[i].name!= upUser.name) {%>
		  				<div class="message-left-body-out" style="position:relative;">
			  				<a href="/user/message/<%- ups[i]._id %>">
					  			<div class="message-left-body-no">
					  				<img src='<%- ups[i].headImgUrl%>' class="img-circle">
					  				<%- ups[i].name%>
					  			</div>
				  			</a>
				  			<span data-upsid="<%-ups[i]._id%>"  class="ups-remove glyphicon glyphicon-remove"></span>
				  		</div>
				  		<%}%>
		  			<%}%>
		  		</div>
		  		<div class="message-right col-xs-9">
		  			<% if(upUser == '' || upUser == null) {%>
		  				<div class="message-right-bg"></div>
		  			<%} else {%>
		  				<div class="message-right-top">
		  					<%- upUser.name%>
		  				</div>
		  				<div class="message-right-body">
		  					
		  				</div>
		  					
		  				<div class="message-right-foot">
		  					<textarea placeholder="回复一下吧～" maxlength="800" class="message-right-chat-msg"></textarea>
		  					<button  class="msg-save btn  btn-info btn-sm">发送</button>
		  				</div>
		  			<%}%>
		  		</div>
		  		<div style="clear:both;"></div>
			</div>
		</div>
	</div>

	<% include foot %>
	<script >

		init();

		$('.msg-save').click(function () {
			var msg = $('.message-right-chat-msg').val();
			msg = msg.replace(/</g,"&lt;");
			msg = msg.replace(/>/g,"&gt;");
			if (msg =="" || msg ==null) {
				
			} else {
				socket.emit("msg",{'msg':msg,'toname':'<%-upUser.name%>'});
				$.ajax({
					url:'/user/message/record',
					type:'post',
					data:{
	             	 record:{
	             	 	'userid':'<%-user._id%>',
						'toid':'<%-upUser._id%>',
						'content':msg,
	             	 }
	             	},
					success:function(data){
						mymsg(msg);
						$('.message-right-chat-msg').val("");
					}
				});
			}
		});


		socket.on("msg", function (msg) {
           
           $('.message-right-body').append(		'<div class="message-right-msgs">'
			  										+'<a href="#">'
			  										+'<img src='+'<%-upUser.headImgUrl%>'
			  										+' class="img-circle msg-head-thisimgh">'
			  										+'</a>'
			  										+'<div class="msg-left-triangle"></div>'
			  										+'<div class="msg-right-thisdiv">'
			  										+msg.msg
			  										+'</div>'
			  										+'</div>');
           $('.message-right-body').scrollTop($('.message-right-body')[0].scrollHeight); 
           

        });


        function thismsg(msg){
        	$('.message-right-body').append(		'<div class="message-right-msgs">'
			  										+'<a href="#">'
			  										+'<img src='+'<%-upUser.headImgUrl%>'
			  										+' class="img-circle msg-head-thisimgh">'
			  										+'</a>'
			  										+'<div class="msg-left-triangle"></div>'
			  										+'<div class="msg-right-thisdiv">'
			  										+msg
			  										+'</div>'
			  										+'</div>');
           $('.message-right-body').scrollTop($('.message-right-body')[0].scrollHeight); 
        }

        function mymsg(msg){
        	$('.message-right-body').append(
						'<div class="message-right-msgs">'
						+'<a href="#">'
						+'<img src='+'<%-user.headImgUrl%>'
						+' class="img-circle msg-head-myimgh">'
						+'</a>'
						+'<div class="msg-right-triangle"></div>'
						+'<div class="msg-right-div">'
						+msg
						+'</div>'
						+'</div>');
						$('.message-right-body').scrollTop($('.message-right-body')[0].scrollHeight); 
        }


        function init(){
        	$.ajax({
					url:'/user/message/getrec',
					type:'post',
					data:{
	             	 getrec:{
						'toid':'<%-upUser._id%>',
	             	 }
	             	},
	             	success:function(data) {
	             		for(var i = 0;i<data.length;i++){
	             			if (data[i].userid == '<%-upUser._id%>') {
	             				thismsg(data[i].content)
	             			} else {
	             				mymsg(data[i].content)
	             			}
	             		}
	             	}
	         });
        }

        $('.ups-remove').click(function(){
        	var id = $(this).data('upsid');
        	var obj = $(this);
        	$.ajax({
        		type:'delete',
        		url:'/user/message/reuser/'+id,
        		success:function(data){
        			obj.parents('.message-left-body-out').slideUp(300,function(){
	        		obj.remove();
	        	});
        		}
        	});
      
        });

	</script>
</body>